<template>
  <div id="panelBox" class="hot-box">
    <ul>
      <li v-for="url in resSrc" >
        <img :src="url.url" alt="What? No images... ">
        <div class="info">
          <h6>{{url.infoh6}}</h6>
          <p>{{url.infop}}</p>
        </div>
        <div class="price">
          <span>￥</span>
          <p>{{url.price}}</p>
        </div>
        <ul class="dotlist">
          <li v-for="item2 in url.activeColor" class="dot-container">
            <div class="outer">
              <span :style="item2"></span>
            </div>
          </li>
        </ul>
        <div class="operator">
          <button class="detail-btn">查看详情</button>
          <button v-show="false" class="addtocart">加入购物车</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  #panelBox
    ul
      li
        box-sizing: border-box
        float: left
        width: 25%
        height: 429px
        text-align: center
        border-right: 1px solid rgba(0,0,0,.1)
        border-top: 1px solid rgba(0,0,0,.1)
        position: relative
        &:last-child
          border-right: 0
        img
          margin: 50px auto
          width: 206px
          height: 206px
        .info
          position: absolute
          width: 100%
          top: 274px
          left: 0
          padding: 0 10px
          h6
            font-size: 16px
            line-height: 1.2
            color: #424242
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis
          p
            font-size: 12px
            line-height: 1.2
            color: #B2B2B2
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis
            padding-top: 7px
        .price
          position: absolute
          width: 100%
          text-align: center
          top: 376px
          line-height: 1.2
          font-size: 18px
          font-family: Arial
          color: #DE4037
          visibility: hidden
          span
            display: inline
            font-size: 14px
            left: 100px
            font-weight: 400
          p
            display: inline
        .operator
          position: absolute
          bottom: 29px
          width: 100%
          line-height: 1.2
          z-index: 20
          font-size: 0px
          text-align: center
          vertical-align: middle
          height: 30px
          .detail-btn
            font-size: 14px
            width: 100px
            height: 28px
            border: 1px solid #e1e1e1
            border-radius: 4px
            background-color: #f9f9f9
            background-image: linear-gradient(180deg, #fff,#f9f9f9)
            color: #646464
            cursor: pointer
          .addtocart
            font-size: 14px
            width: 100px
            height: 28px
            border: 1px solid #e1e1e1
            border-radius: 4px
            background-color: #f9f9f9
            background-image: linear-gradient
            padding-left: 20px
        .dotlist
          position: absolute
          height: 18px
          width: 100%
          display: flex
          flex-direction: row
          justify-content: center
          bottom: 79px
          .dot-container
            border: 0
            width: 16px
            height: 16px
            margin 0 5px
            .outer
              border: 3px solid #b2b2b2
              border-radius: 50%
              span
                display: block
                border-radius: 50%
                height: 8px
                width: 8px
                margin: 1px auto
</style>
<script>
  export default {
    props: ['resSrc'],
    components: {}
  }
</script>
